<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div>这是div</div>
  <input type="text" id="input1">
  <input type="button" value="赋值按钮" onclick="f()">
  <input type="button" value="平方乘法按钮" onclick="f2()">
  <input type="button" value="加法按钮" onclick="f3()">
    <div>结果是<span>0</span></div>

<script>
    /* NaN= not a number=isNaN(x)*/
    function f(){/*赋值*/
        let input1 = document.querySelector("#input1");
        let div1 = document.querySelector("div");
        if(isNaN(input1.value)){
            div1.innerText="输入错误不是数字";
            return;
        }
        div1.innerText= input1.value;
    }
    function f2(){/*平方乘法*/
        let input1 = document.querySelector("#input1");
        let span = document.querySelector("span");
        span.innerText= input1.value*input1.value;
    }
    function f3(){/*加法*/
        let input1 = document.querySelector("#input1");
        let span = document.querySelector("span");
        span.innerText= input1.value*1+input1.value*1;
        //两种方式
        //span.innerText=parseFloat(input1.value)+parseFloat(input1.value)
    }


</script>
</body>
</html>